<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="web前端, css, jQuery, javascript" />
	<title>打印</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 14px;
		}

		.container {
			font-family: "微软雅黑", arial, sans-serif;
			width: 800px;
			margin: 0 auto;
		}

		.head {
			overflow: hidden;
			height: 80px;
			padding: 10px 0;
		}

		.head .logo {
			display: inline-block;
			margin-right: 40px;
			vertical-align: middle;
		}

		.head h4 {
			display: inline-block;
			font-size: 40px;
			margin: 0;
			line-height: 60px;
			width: 260px;
			text-align: center;
			vertical-align: middle;
		}

		.head .area {
			float: right;
			width: 300px;
			height: 60px;
			background-color: #e6e6e6;
		}

		.head .area img{
			display: block;
			height: 60px;
			width: 100%;
		}

		.orderinfo {
			overflow: hidden;
		}

		.orderinfo dl {
			margin: 0 50px 0 0;
			display: inline-block;
		}

		.orderinfo dd {
			margin: 0;
			line-height: 30px;
		}

		.userinfo {
			margin: 20px 0;
		}

		.userinfo h5 {
			min-width: 200px;
			font-size: 20px;
			display: inline-block;
			margin: 0;
		}

		.userinfo p span {
			display: inline-block;
			width: 80px;
			text-align: center;
		}

		.skulist {
			width: 100%;
			border: 1px solid #666;
			border-right: 0;
			border-bottom: 0;
		}

		.skulist tr {
			border-bottom: 1px solid #666;
		}

		.skulist td {
			line-height: 30px;
			text-align: center;
			border-right: 1px solid #666;
			border-bottom: 1px solid #666;
		}

		.skulist thead {
			background-color: #e6e6e6;
		}

		.footer {
			margin-top: 30px;
		}

		.footer .l {
			border-right: 1px #333 dashed;
			width: 260px;
			display: inline-block;
			text-align: center
		}

		.footer .l h4 {
			font-size: 24px;
			margin: 10px 0;
		}

		.footer .l h5 {
			font-size: 16px;
			margin: 10px;
		}

		.footer .l p {
			font-size: 12px;
			text-align: left;
			margin: 0 0 0 40px;
			line-height: 20px;
		}

		.footer .r {
			margin-left: 120px;
			display: inline-block;
			vertical-align: top;
		}

		.footer .r p {
			font-size: 14px;
		}

		.footer .r p strong {
			font-size: 16px;
			width: 100px;
			display: inline-block;
		}

		.footer .r .qz {
			overflow: hidden;
			margin-top: 20px;
		}

		.footer .r .lab {
			font-size: 16px;
			display: inline-block;
			font-weight: bold;
			width: 100px;
			line-height: 40px;
			vertical-align: top;
		}
		.footer .r .line{
			display: inline-block;
    		width: 200px;
		}
		.footer .r .line p{
			font-size: 14px;
			border-bottom: 1px solid #333;
			height: 40px;
			line-height: 40px;
			text-align: right;
			margin: 0;
		}
	</style>
</head>

<body>
	<div class="container" id="container"></div>
</body>
<script id="tplContent" type="text/html">
	<div class="head">
		<img class="logo"
			src="" />
		<h4>送货单</h4>
		<div class="area">
			<img src="data:image/png;base64,<%=data.barcode%>" />
		</div>
	</div>

	<div class="orderinfo">
		<dl>
			<dd>订单号：<span><%=data.orderNo%></span></dd>
			<dd>商城订单号：<span><%=data.customerOrderNo%></span></dd>
		</dl>
		<dl>
			<dd>发货单号：<span><%=data.orderDeliveryNo%></span></dd>
			<dd>下单时间：<span><%=data.createTime%></span></dd>
		</dl>
	</div>

	<div class="userinfo">
		<h5><%=data.projectName%></h5>
		<h5><%=data.customerName%></h5>
		<p><span>收货人：</span><%=data.recipientName%> - <%=data.recipientPhone%></p>
		<p><span>地 址：</span><%=data.customerReceiptAddress%></p>
		<p><span>发货备注：</span><%=data.deliveryMemo%></p>
	</div>

	<table class="skulist" cellspacing="0">
		<thead>
			<tr>
				<td>序号</td>
				<td>货号</td>
				<td width="40%">名称</td>
				<td>数量</td>
				<td>单位</td>
				<td>单价</td>
				<td>金额</td>
			</tr>
		</thead>
		<tbody>
			<% 
				for(var i=0, imax= data.itemList.length; i<imax; i++){
					var item = data.itemList[i];
			%>
			<tr>
				<td><%=item.id%></td>
				<td><%=item.skuModel%></td>
				<td><%=item.skuName%></td>
				<td><%=item.itemQty%></td>
				<td><%=item.unit%></td>
				<td><%=item.currentPrice%></td>
				<td><%=item.totalPrice%></td>
			</tr>
			<%}%>
		</tbody>
	</table>

	<div class="footer">
			<div class="l">
				<h4>领先服务 创造未来</h4>
				<h5>综合办公解决方案服务商</h5>
				<img class="logo" src="data:image/png;base64,<%=data.rqImage%>" />
				<p>投诉、建议、评价、详情请扫我</p>
				<p>投诉电话：13366012315</p>
				<p>投诉邮箱：<br />13366012315@66123123.com</p>
			</div>
			<div class="r">
				<p><strong>业务员：</strong><%=data.staffName%></p>
				<p><strong>仓库：</strong><%=data.warehouseName%></p>
				<p><strong>支付方式：</strong><%=data.payTypeName%></p>
				<div class="qz">
					<div class="lab">签收：</div>
					<div class="line">
						<p>(满意)</p>
						<p>(一般)</p>
						<p>(满意)</p>
					</div>
				</div>
				<div>
					<div class="lab">收款人：</div>
					<div class="line">
						<p></p>
					</div>
				</div>
			</div>
		</div>
</script>
<script src="../js/mini-tpl.js"></script>
<script type="">
	window.onload =function(){
		window.addEventListener("message", function(event){//自己定义的一个监听的message
		  let data = event.data;//event  是vue文件中把已经处理好的数据传过来的
		  if(data.cmd=='getFormJson'){//数据类型，对应的字段都可以自己定义
			var content = document.getElementById('tplContent').innerHTML;
			var result = miniTpl(content, data.info);
			document.getElementById('container').innerHTML = result;
		  }
		});
	  }
	</script>
</html>